<template>
    <div class="apiContentBox">
      <div class="apiContentBoxHeader" v-if="addapi">
        <div>
          <el-dropdown v-if="groupId != -2&(this.$store.state.user.memberType==='0'|this.$store.state.user.memberType==='-1')" class="btnItem" size="small" split-button type="primary" @click="handleClickAddAPI" @command="handleCommandAdd">
            <i class="el-icon-plus"></i><span style="display: inline-block;margin-left: 10px;">新建API</span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="handleClickAddApi">新建 HTTP API</el-dropdown-item>
              <el-dropdown-item command="handleClickExport">导入 API 文件</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span v-if="this.$store.state.user.memberType!='0'&this.$store.state.user.memberType!='-1'" style="font-size: 20px;font-weight: 700;margin-left: 10px;line-height: 46px;">API分组</span>
          <div style="display: inline-block;line-height: 46px;" v-if="groupId == -2&(this.$store.state.user.memberType==='0'|this.$store.state.user.memberType==='-1')">
            <el-button type="danger" size="small" @click="allRemoveFun">全部删除</el-button>
          </div>
          <el-button type="text" v-if="groupId !== -2&(this.$store.state.user.memberType==='0'|this.$store.state.user.memberType==='-1')" class="headerBtn btnItem" @click="batch"><i class="iconfont">&#xe605;</i><span class="headerBtnSize" >批量操作</span></el-button>
        </div>

        <div class="searchBox">
          <div class="searchIten">
            <el-input
              placeholder="搜索API"
              @keyup.enter.native="funSearchApi"
              prefix-icon="el-icon-search"
              size="small"
              v-model="searchData">
            </el-input>
          </div>
          <div class="searchIten">
            <i class="iconfont seeBtnEnv">&#xe666;</i>
            <el-select v-model="envData" placeholder="请选择" size="small">
              <el-option
                v-for="item in optionsEnvironmental"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="searchIten">
            <!--<span class="selectBtn"><i class="iconfont">&#xe605;</i>列表项</span>-->
          </div>
        </div>
      </div>
      <div class="apiContentBoxHeader1" v-else>
        <el-button  type="text" @click="batchcancel"><i class="el-icon-back"></i> &nbsp&nbsp取消 &nbsp&nbsp|</el-button>
        <el-dropdown trigger="click" @command="val => {handleCommand(val,data) }">
        <el-button type="text" :disabled='disabledButton'>修改<i class="el-icon-arrow-down el-icon--right"></i>&nbsp&nbsp|</el-button>
          <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="state">状态</el-dropdown-item>
          <!--<el-dropdown-item command="charge">负责人</el-dropdown-item>-->
          <!--<el-dropdown-item command="URL">URL</el-dropdown-item>-->
          <!--<el-dropdown-item command="label">标签</el-dropdown-item>-->
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown trigger="click" @command="val => {handleCommand1(val,data) }">
          <el-button type="text" :disabled='disabledButton'>标记<i class="el-icon-arrow-down el-icon--right"></i>&nbsp&nbsp|</el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="wu">无</el-dropdown-item>
            <el-dropdown-item command="bj">标记</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button type="text" :disabled='disabledButton' @click="bulkcopy">复制 &nbsp&nbsp|</el-button>
        <el-button type="text" :disabled='disabledButton' @click="bulkmove">移动 &nbsp&nbsp|</el-button>
        <el-button type="text" :disabled='disabledButton' @click="bulkdelete">删除 &nbsp&nbsp|</el-button>
      </div>
      <div class="elementTableBox apiGroupH">
        <div  v-show="this.groupId != -2">
        <el-table
          :data="tableData"
          size="small"
          stripe
          class="elementTable"
          header-cell-class-name="elementTableHeader"
          cell-class-name="elementTableBody"
          @row-click="tableRowHandleClick"
          highlight-current-row
          @selection-change="changeFun"
        >
          <!--<el-table-column align="center" width="150" label="ID" prop="id"></el-table-column>-->
          <el-table-column :key="Math.random()" type="selection" width="55" v-if="addapi==false"></el-table-column>
          <el-table-column :key="Math.random()" align="center">
            <template slot-scope="scope">
                <span @click.stop="onstarred(scope.row.id,1)" v-if="scope.row.starred==null|scope.row.starred==0" style="padding: 20px"><i class="iconfont"  style="cursor: pointer;" >&#xe653;</i></span>
                <span @click.stop="onstarred(scope.row.id,0)" v-else  style="padding: 20px"><i class="iconfont"   style="color: #f48932;cursor: pointer;">&#xe653;</i></span>
            </template>
          </el-table-column>
          <el-table-column :key="Math.random()" align="center" label="APls" prop="name" width="140"></el-table-column>
          <el-table-column :key="Math.random()" align="center" label="请求方式" prop="protocol"></el-table-column>
          <el-table-column :key="Math.random()" align="center" min-width="300" label="URL" prop="uri"></el-table-column>
          <el-table-column :key="Math.random()" align="center" label="分组" prop="groupName"></el-table-column>
          <el-table-column :key="Math.random()" align="center" label="标签" width="200" >
            <template slot-scope="scope">
              <div style="margin-bottom: 5px">
              <el-tag type="success" v-for="(item, index) of scope.row.tags.split(',')" :key="index + 'tags'" size="small" style="margin: 5px 10px 0px 0px">{{item}}</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column :key="Math.random()" align="center" label="负责人" prop="manageUserName"></el-table-column>
          <!--<el-table-column align="center" label="创建者" prop="cusr"></el-table-column>-->
          <!--<el-table-column align="center" min-width="120" label="最近更新者" prop="euser"></el-table-column>-->
          <el-table-column :key="Math.random()" align="center" min-width="200" label="创建时间" prop="ctime">
          </el-table-column>
          <el-table-column :key="Math.random()" align="center" min-width="200" label="更新时间" prop="etime"></el-table-column>
          <el-table-column align="center" :key="Math.random()" v-if="isShowColumn&(this.$store.state.user.memberType==='0'|this.$store.state.user.memberType==='-1')" label="操 作" fixed="right" width="160" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <div class="tableOperatuib">
                <!--<el-button type="text" @click.native.stop="openNewTab">新标签打开</el-button>-->
                <el-button type="text" @click.native.stop="editRow(scope.row.id)">编辑</el-button>
                <el-dropdown style="margin-left: 10px;cursor: pointer;" trigger="click" @click.native.stop="copyApifun">
                <span class="el-dropdown-link">
                  更多<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native.stop="dropdownCopy(scope.row)">复制</el-dropdown-item>
                    <el-dropdown-item @click.native.stop="dropdownDelete(scope.row)">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </template>
          </el-table-column>
        </el-table>
        </div>
        <div v-show="this.groupId == -2">
        <el-table
          :data="tableData"
          size="small"
          stripe
          class="elementTable"
          header-cell-class-name="elementTableHeader"
          cell-class-name="elementTableBody"
          @row-click="tableRowHandleClick"
          highlight-current-row>
          <!--<el-table-column align="center" width="150" label="ID" prop="id"></el-table-column>-->
          <el-table-column align="center" label="APls" prop="name" width="140"></el-table-column>
          <el-table-column align="center" label="请求方式" prop="type"></el-table-column>
          <el-table-column align="center" min-width="300" label="URL" prop="uri"></el-table-column>
          <el-table-column align="center" label="分组" prop="groupName"></el-table-column>
          <el-table-column align="center" label="标签" prop="tags"></el-table-column>
          <el-table-column align="center" min-width="200" label="删除时间" prop="etime"></el-table-column>
          <el-table-column align="center" label="操 作" v-if="(this.$store.state.user.memberType==='0'|this.$store.state.user.memberType==='-1')" width="160" fixed="right" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <div class="tableOperatuib">
                    <el-button type="text" @click.native.stop="onrecovery(scope.row)">恢复</el-button>
                    <el-button type="text" @click.native.stop="deletecompletely(scope.row)">彻底删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        </div>
        <div class="pagination-container">
          <span style="color: #48555c;display: inline-block;margin-left: 20px;">已加载{{this.tableData.count}}条数据，共{{this.tableData.count}}条记录</span>
        </div>
    </div>
      <el-dialog
        v-if="dialogVisiblerecovery"
        custom-class="dhcWebLayer"
        top="0"
        :close-on-click-modal="false"
        title="恢复API所到分组选择"
        :visible.sync="dialogVisiblerecovery"
        width="30%">
        <div style="height: 500px;overflow-y: auto;border: 1px solid #eee;box-sizing: border-box;padding: 10px 8px;">
          <el-tree
            :highlight-current="true"
            :data="treeData"
            :props="defaultProps"
            node-key="id"
            :expand-on-click-node="false"
            :default-expand-all="false">
          <span class="custom-tree-node" slot-scope="{ node, data }" @click="handelClickTreeNode(data)">
            <span class="treeSize">{{ data.name }}</span>
          </span>
          </el-tree>
        </div>
        <div style="margin-top: 16px;text-align: right;">
          <el-button type="primary" @click="saveGroupFun">确 认</el-button>
          <el-button @click="closeDialogFun">取 消</el-button>
        </div>
      </el-dialog>
      <!--复制-->
      <el-dialog
        v-if="dialogVisibleCopyApi"
        custom-class="dhcWebLayer"
        top="0"
        :close-on-click-modal="false"
        title="复制API"
        :visible.sync="dialogVisibleCopyApi"
        width="30%">
        <el-form ref="formCopyApi" label-position="top" :model="formCopyApi" label-width="120px">
          <el-form-item label="原Api主键ID">
            <el-input size="small" v-model="formCopyApi.oldApiId" disabled></el-input>
          </el-form-item>
          <el-form-item label="新Api分组">
            <el-input size="small" v-model="copyGroupNameDialog" @focus="dialogVisibleGroup = true"></el-input>
          </el-form-item>
          <el-form-item label="新Api名称">
            <el-input size="small" v-model="formCopyApi.newName"></el-input>
          </el-form-item>
          <el-form-item label="新Api请求类型">
            <el-select size="small" v-model="formCopyApi.newMethod" placeholder="请选择">
              <el-option
                v-for="item in newApiDataOption"
                :key="item.value"
                :label="item.value"
                :value="item.key">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="新Api请求URI">
            <el-input size="small" v-model="formCopyApi.newUri"></el-input>
          </el-form-item>
        </el-form>
        <div style="margin-top: 16px;text-align: right;">
          <el-button size="small" type="primary" @click="saveCopyFun">确 认</el-button>
          <el-button size="small" @click="dialogVisibleCopyApi = false">取 消</el-button>
        </div>
      </el-dialog>
      <el-dialog
        v-if="dialogVisibleGroup"
        custom-class="dhcWebLayer"
        top="0"
        :close-on-click-modal="false"
        title="选择分组"
        :visible.sync="dialogVisibleGroup"
        width="35%">
        <div style="height: 500px;overflow-y: auto;border: 1px solid #eee;box-sizing: border-box;padding: 10px 8px;">
          <el-tree
            :highlight-current="true"
            :data="treeDataGroup"
            :props="defaultPropsGroup"
            node-key="id"
            :expand-on-click-node="false"
            :default-expand-all="false">
          <span class="custom-tree-node" slot-scope="{ node, data }" @click="handelClickTreeNodeGroup(data)">
            <span class="treeSize">{{ data.name }}</span>
          </span>
          </el-tree>
        </div>
        <div style="margin-top: 16px;text-align: right;">
          <el-button size="small" type="primary" @click="saveGroupFunHandelClick">确 认</el-button>
          <el-button size="small" @click="closeDialogFunHandelClick">取 消</el-button>
        </div>
      </el-dialog>
      <!--批量修改状态-->
      <el-dialog
        title="编辑API状态"
        custom-class="dhcWebLayer"
        top="0"
        :visible.sync="dialogVisiblebulkstatus"
        width="600px"
        :close-on-click-modal="false">
        <el-form ref="bulkstatusForm" :model="bulkstatusForm" label-width="10px">
          <el-form-item>
            <el-radio v-model="bulkstatusForm.status" label="100">已发布</el-radio>
          </el-form-item>
          <el-form-item>
            <el-radio v-model="bulkstatusForm.status" label="201">设计中</el-radio>
            <el-radio v-model="bulkstatusForm.status" label="202">待确定</el-radio>
            <el-radio v-model="bulkstatusForm.status" label="203">开发</el-radio>
            <el-radio v-model="bulkstatusForm.status" label="204">对接</el-radio>
            <el-radio v-model="bulkstatusForm.status" label="205">测试</el-radio>
            <el-radio v-model="bulkstatusForm.status" label="206">完成</el-radio>
          </el-form-item>
          <el-form-item>
            <el-radio v-model="bulkstatusForm.status" label="301">异常</el-radio>
            <el-radio v-model="bulkstatusForm.status" label="302">维护</el-radio>
            <el-radio v-model="bulkstatusForm.status" label="303">废弃</el-radio>
          </el-form-item>
          <div style="text-align: right;">
            <el-button type="primary" size="small" @click="editbulkstatus('bulkstatusForm')" class="btnMarginChangeerr">确认</el-button>
            <el-button size="small" @click="dialogVisiblebulkstatus = false">取 消</el-button>
          </div>
        </el-form>
      </el-dialog>
      <!--批量修改负责人-->
      <el-dialog
        v-if="dialogVisiblebulkcharge"
        custom-class="dhcWebLayer"
        top="0"
        :close-on-click-modal="false"
        title="修改负责人"
        :visible.sync="dialogVisiblebulkcharge"
        width="30%">
        <el-form ref="formCopyApi" label-position="top" :model="formCopyApi" label-width="120px">
          <el-form-item label="目标项目">
            <el-input size="small" v-model="formCopyApi.oldApiId" disabled></el-input>
          </el-form-item>
          <el-form-item label="目标分组">
            <el-input size="small" v-model="copyGroupNameDialog"></el-input>
          </el-form-item>
        </el-form>
        <div style="margin-top: 16px;text-align: right;">
          <el-button size="small" type="primary" @click="saveCopyFun">确 认</el-button>
          <el-button size="small" @click="dialogVisiblebulkcharge = false">取 消</el-button>
        </div>
      </el-dialog>
      <!--批量修改URL-->
      <el-dialog
        v-if="dialogVisiblebulkURL"
        custom-class="dhcWebLayer"
        top="0"
        :close-on-click-modal="false"
        title="批量修改URL"
        :visible.sync="dialogVisiblebulkURL"
        width="30%">
        <el-form ref="formCopyApi" label-position="top" :model="formCopyApi" label-width="120px">
          <el-form-item label="目标项目">
            <el-input size="small" v-model="formCopyApi.oldApiId" disabled></el-input>
          </el-form-item>
          <el-form-item label="目标分组">
            <el-input size="small" v-model="copyGroupNameDialog"></el-input>
          </el-form-item>
        </el-form>
        <div style="margin-top: 16px;text-align: right;">
          <el-button size="small" type="primary" @click="saveCopyFun">确 认</el-button>
          <el-button size="small" @click="dialogVisiblebulkURL = false">取 消</el-button>
        </div>
      </el-dialog>
      <!--批量修改标签-->
      <el-dialog
        v-if="dialogVisiblebulklabel"
        custom-class="dhcWebLayer"
        top="0"
        :close-on-click-modal="false"
        title="修改标签"
        :visible.sync="dialogVisiblebulklabel"
        width="30%">
        <el-form ref="formCopyApi" label-position="top" :model="formCopyApi" label-width="120px">
          <el-form-item label="目标项目">
            <el-input size="small" v-model="formCopyApi.oldApiId" disabled></el-input>
          </el-form-item>
          <el-form-item label="目标分组">
            <el-input size="small" v-model="copyGroupNameDialog" ></el-input>
          </el-form-item>
        </el-form>
        <div style="margin-top: 16px;text-align: right;">
          <el-button size="small" type="primary" @click="saveCopyFun">确 认</el-button>
          <el-button size="small" @click="dialogVisiblebulklabel = false">取 消</el-button>
        </div>
      </el-dialog>
      <!--批量操作复制-->
      <el-dialog
        v-if="dialogVisiblebulkCopy"
        custom-class="dhcWebLayer"
        top="0"
        :close-on-click-modal="false"
        title="复制API"
        :visible.sync="dialogVisiblebulkCopy"
        width="30%">
        <el-form ref="bulkcopyForm" label-position="top" :model="bulkcopyForm" label-width="120px">
          <!--<el-form-item label="目标项目">-->
            <!--<el-select v-model="value" placeholder="请选择">-->
              <!--<el-option-->
                <!--v-for="item in bulkMoveoptions"-->
                <!--:key="item.value"-->
                <!--:label="item.label"-->
                <!--:value="item.value">-->
              <!--</el-option>-->
            <!--</el-select>-->
          <!--</el-form-item>-->
          <el-form-item label="目标分组">
            <el-input size="small" v-model="bulkcopyForm.groupName" @focus="bulkCopyfz"></el-input>
          </el-form-item>
        </el-form>
        <div style="margin-top: 16px;text-align: right;">
          <el-button size="small" type="primary" @click="bulkCopysave('bulkcopyForm')">确 认</el-button>
          <el-button size="small" @click="dialogVisiblebulkCopy = false">取 消</el-button>
        </div>
      </el-dialog>
      <!--批量操作移动-->
      <el-dialog
        v-if="dialogVisiblebulkMove"
        custom-class="dhcWebLayer"
        top="0"
        :close-on-click-modal="false"
        title="批量编辑API分组"
        :visible.sync="dialogVisiblebulkMove"
        width="30%">
        <el-form ref="bulkMoveForm" label-position="top" :model="bulkMoveForm" label-width="120px">
          <!--<el-form-item label="目标项目">-->
            <!--<el-select v-model="value" placeholder="请选择">-->
              <!--<el-option-->
                <!--v-for="item in bulkMoveoptions"-->
                <!--:key="item.value"-->
                <!--:label="item.label"-->
                <!--:value="item.value">-->
              <!--</el-option>-->
            <!--</el-select>-->
          <!--</el-form-item>-->
          <el-form-item label="目标分组">
            <el-input size="small" v-model="bulkMoveForm.groupName" @focus="bulkmovefz"></el-input>
          </el-form-item>
        </el-form>
        <div style="margin-top: 16px;text-align: right;">
          <el-button size="small" type="primary" @click="bulkMovesave('bulkMoveForm')">确 认</el-button>
          <el-button size="small" @click="dialogVisiblebulkMove = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
  import {
    getAPIList,
    deleteAPIItem,
    getGroupList,
    recoverysave,
    deletecompletely,
    deletecompletelyAll,
    copyApi,
    editbulkstatus,
    bulkCopysave,
    bulkMovesave,
    bulkdelete,
    onsign
  } from '@/api/apiModel/api.js'
  export default {
    name: 'apiContnet',
    data() {
      return {
        isShowColumn: true,
        disabledButton: true,
        abc: '',
        addapi: true,
        dialogVisiblebulkstatus: false, // 批量修改状态
        dialogVisiblebulkcharge: false, // 批量修改负责人
        dialogVisiblebulkURL: false, // 批量修改URL
        dialogVisiblebulklabel: false, // 批量修改label
        dialogVisiblebulkCopy: false, // 批量复制
        dialogVisiblebulkMove: false, // 批量移动
        qfgroup: '', // 区分分组
        value: '',
        groupId: '',
        bulkMoveForm: {
          groupId: '',
          groupName: ''
        },
        bulkcopyForm: {
          groupId: '',
          groupName: ''
        },
        bulkMoveoptions: [
          {
            value: 'APIManagementDemoProject',
            label: 'APIManagementDemoProject'
          }
        ],
        apiIds: [], // 批量存储ID数组
        bulkarr: [], // 批量数组
        bulkstatusForm: {
          status: ''
        },
        treeHandelClickName: '',
        treeHandelClickId: '',
        newApiDataOption: [
          {
            key: 'POST',
            value: 'POST'
          },
          {
            key: 'GET',
            value: 'GET'
          },
          {
            key: 'PUT',
            value: 'PUT'
          },
          {
            key: 'DELETE',
            value: 'DELETE'
          },
          {
            key: 'HEAD',
            value: 'HEAD'
          },
          {
            key: 'OPTIONS',
            value: 'OPTIONS'
          },
          {
            key: 'PATCH',
            value: 'PATCH'
          }
        ],
        copyGroupNameDialog: '',
        treeDataGroup: [],
        defaultPropsGroup: {
          children: 'children',
          label: 'name'
        },
        dialogVisibleGroup: false,
        formCopyApi: {
          oldApiId: '', // 原Api主键ID
          newGroupId: '', // 新Api分组ID
          newName: '', // 新Api名称
          newMethod: '', // 新Api请求类型
          newUri: '' // 新Api请求URI
        },
        dialogVisibleCopyApi: false,
        postListroup: {
          'condition': [
          ],
          'sort': [
            {
              'direction': 'DESC',
              'property': 'ctime'
            }
          ],
          'fields': []
        },
        postListroupSearch: {
          'condition': [
          ],
          'sort': [
            {
              'direction': 'DESC',
              'property': 'ctime'
            }
          ],
          'fields': []
        },
        searchData: '',
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        envData: '',
        copyGroupName: '',
        copyGroupId: '',
        copyid: '',
        optionsEnvironmental: [],
        dialogVisiblerecovery: false,
        tableData: [
        ],
        removeData: {
          groupId: '',
          projectId: ''
        }
      }
    },
    mounted() {
      // 查询所有API
      this.fetchData()
      this.fetchgroup()
      this.getTreeDataList()
    },
    methods: {
      batch() {
        this.isShowColumn = false
        this.addapi = false
      },
      batchcancel() {
        this.isShowColumn = true
        this.addapi = true
      },
      onstarred(id, val) {
        const bulkstatusForm = {
          apiIds: [id],
          starred: val
        }
        onsign(bulkstatusForm).then(res => {
          this.fetchData()
        })
      },
      // 选择复选框
      changeFun(val) {
        this.apiIds = []
        if (this.tableData.length > 0) {
          for (var i = 0; i < val.length; i++) {
            this.apiIds.push(val[i].id)
          }
        }
        if (val.length > 0) {
          this.disabledButton = false
        } else {
          this.disabledButton = true
        }
      },
      handleCommand(command, data) {
        if (command === 'state') { // 状态
          this.editstate()
        } else if (command === 'charge') { // 负责人
          this.editcharge()
        } else if (command === 'URL') { // URL
          this.editURL()
        } else if (command === 'label') { // 标签
          this.editlabel()
        }
      },
      handleCommand1(command, data) {
        if (command === 'wu') { // 无
          this.onsign(0)
        } else if (command === 'bj') { // 标记
          this.onsign(1)
        }
      },
      onsign(val) {
        const onsignForm = {
          apiIds: this.apiIds,
          starred: val
        }
        onsign(onsignForm).then(res => {
          this.fetchData()
          this.dialogVisiblebulkCopy = false
          this.$message({
            message: '标记成功',
            type: 'success'
          })
        })
      },
      editstate() {
        this.dialogVisiblebulkstatus = true
      }, // 状态
      editbulkstatus() { // 修改状态保存
        const bulkstatusForm = {
          apiIds: this.apiIds,
          status: this.bulkstatusForm.status
        }
        editbulkstatus(bulkstatusForm).then(res => {
          this.fetchData()
          this.dialogVisiblebulkstatus = false
          this.$message({
            message: '修改成功',
            type: 'success'
          })
        })
      },
      editcharge() {
        this.dialogVisiblebulkcharge = true
      }, // 负责人
      editURL() {
        this.dialogVisiblebulkURL = true
      }, // URL
      editlabel() {
        this.dialogVisiblebulklabel = true
      }, // 标签
      bulkcopy() { // 批量复制
        this.dialogVisiblebulkCopy = true
      },
      bulkCopyfz() {
        this.qfgroup = 'copy'
        this.dialogVisibleGroup = true
      },
      bulkCopysave() {
        const bulkcopyForm = {
          oldApiIds: this.apiIds,
          newGroupId: this.bulkcopyForm.groupId
        }
        bulkCopysave(bulkcopyForm).then(res => {
          this.fetchData()
          this.dialogVisiblebulkCopy = false
          this.$message({
            message: '复制成功',
            type: 'success'
          })
        })
      },
      bulkmove() {
        // 批量移动
        this.dialogVisiblebulkMove = true
      },
      bulkmovefz() {
        this.qfgroup = 'move'
        this.dialogVisibleGroup = true
      },
      bulkMovesave() {
        const bulkMoveForm = {
          apiIds: this.apiIds,
          groupId: this.bulkMoveForm.groupId
        }
        bulkMovesave(bulkMoveForm).then(res => {
          this.fetchData()
          this.dialogVisiblebulkMove = false
          this.$message({
            message: '移动成功',
            type: 'success'
          })
        })
      },
      bulkdelete() {
        // 批量删除
        this.$confirm('此操作无法恢复，确认操作？', '永久性删除所选Api', { type: 'warning' }).then(() => {
          const deleteform = {
            apiIds: this.apiIds
          }
          bulkdelete(deleteform).then(res => {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.fetchData()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      allRemoveFun() {
        this.$confirm('此操作无法恢复，确认操作？', '永久性删除所有Api', { type: 'warning' }).then(() => {
          let removeArrId = []
          this.tableData.forEach(val => {
            removeArrId.push(val.id)
          })
          deletecompletelyAll(removeArrId).then(res => {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.fetchData1(-2, this.$store.state.user.projectId)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      funSearchApi() { // 搜索api
        this.groupId = ''
        this.postListroupSearch.condition = []
        if (this.searchData !== '') {
          const searchItem = {
            'property': 'name',
            'value': this.searchData,
            'type': 'LIKE'
          }
          this.postListroupSearch.condition.push(searchItem)
        }
        getAPIList(this.postListroupSearch, -1, -100).then(res => {
          console.log('tableData - ', res)
          this.tableData = res.data.data.records
          this.tableData.count = res.data.data.count
        })
      },
      saveCopyFun() {
        copyApi(this.formCopyApi).then(res => {
          this.$message({
            message: '复制成功',
            type: 'success'
          })
          this.dialogVisibleCopyApi = false
          this.fetchData()
        }).catch((err) => {
          this.$message.error('复制失败')
          this.fetchData()
        })
      },
      getTreeDataList() {
        getGroupList(this.postListroup, this.$store.state.user.projectId, '').then(res => {
          this.treeDataGroup = res.data.data
        })
      },
      saveGroupFunHandelClick() {
        switch (this.qfgroup) {
          case 'move':
            this.bulkMoveForm.groupId = this.treeHandelClickId
            this.bulkMoveForm.groupName = this.treeHandelClickName
            break
          case 'copy':
            this.bulkcopyForm.groupId = this.treeHandelClickId
            this.bulkcopyForm.groupName = this.treeHandelClickName
            break
        }
        this.formCopyApi.newGroupId = this.treeHandelClickId
        this.copyGroupNameDialog = this.treeHandelClickName
        this.dialogVisibleGroup = false
      },
      closeDialogFunHandelClick() {
        this.dialogVisibleGroup = false
      },
      handelClickTreeNodeGroup(node) {
        this.treeHandelClickName = node.name
        this.treeHandelClickId = node.id
      },
      copyApifun() {
      },
      onrecovery(row) {
        this.copyid = row.id
        this.dialogVisiblerecovery = true
      },
      // 恢复数据
      saveGroupFun() {
        recoverysave(this.copyid, this.copyGroupId).then(res => {
          this.$message({
            message: '恢复成功',
            type: 'success'
          })
          this.fetchData1(-2, this.$store.state.user.projectId)
          this.dialogVisiblerecovery = false
          this.copyid = ''
        })
      },
      // 取消恢复数据
      closeDialogFun() {
        this.copyGroupName = ''
        this.copyGroupId = ''
        this.copyid = ''
        this.dialogVisiblerecovery = false
      },
      handelClickTreeNode(node) {
        console.log(node)
        this.copyGroupName = node.name
        this.copyGroupId = node.id
      },
      // 分组列表查询
      fetchgroup() {
        getGroupList(this.postListroup, this.$store.state.user.projectId, '').then(res => {
          console.log(res)
          this.treeData = res.data.data
        })
      },
      // 初始化查询
      fetchData() {
        this.groupId = ''
        getAPIList(this.postListroup, -1, this.$store.state.user.projectId).then(res => {
          console.log(res)
          this.tableData = res.data.data.records
          this.tableData.count = res.data.data.count
        })
      },
      // 传左侧树值查询
      fetchData1(groupId, projectId) {
        this.groupId = groupId
        getAPIList(this.postListroup, groupId, projectId).then(res => {
          console.log(res)
          this.tableData = res.data.data.records
          this.tableData.count = res.data.data.count
        })
      },
      editRow(id) { // 编辑
        this.$router.push({
          name: 'editApiEditPage',
          query: {
            id,
            projectId: this.$store.state.user.projectId
          }
        })
      },
      dropdownCopy(row) { // 复制
        console.log(row)
        this.formCopyApi.oldApiId = row.id
        this.formCopyApi.newName = `副本 - ${row.name}`
        this.formCopyApi.newUri = row.uri
        this.dialogVisibleCopyApi = true
      },
      dropdownDelete(row) { // 删除
        this.$confirm('确认移除API？。', '移除API', { type: 'warning' }).then(() => {
          this.deleteAffirm(row)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      deleteAffirm(row) {
        deleteAPIItem(row.id).then(res => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.fetchData()
        })
      },
      deletecompletely(row) { // 删除
        this.$confirm('此操作无法恢复，确认操作？', '永久性删除Api', { type: 'warning' }).then(() => {
          this.delete(row)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      delete(row) {
        deletecompletely(row.id).then(res => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.fetchData1(-2, this.$store.state.user.projectId)
        })
      },
      tableRowHandleClick(value) {
        // 点击行
        this.$router.push({
          name: 'editApiPage',
          query: {
            id: value.id,
            projectId: this.$store.state.user.projectId
          }
        })
      },
      handleClickAddAPI() { // 新建api
        this.$router.push({
          name: 'addApiPage',
          query: { projectId: this.$store.state.user.projectId }
        })
      },
      handleClickEcport() { // 导入api文件

      },
      handleCommandAdd(val) { // 新增按钮 下拉框菜单项
        switch (val) {
          case 'handleClickAddApi':
            this.handleClickAddAPI()
            break
          case 'handleClickExport':
            this.handleClickEcport()
            break
        }
      }
    }
  }
</script>

<style scoped>

</style>
